<script setup>
import { getRepairNoteByRepairId, queryPreregisterMessage } from '@/api/Base/preregister';
import { format, formatISO, subMonths } from 'date-fns';
import { MdPreview } from 'md-editor-v3';


definePage({
    name: 'fixhistory',
    meta: {
        // level: 2,
        // title: '维修记录',
    },
})
const router = useRouter()
const route = useRoute()


onMounted(() => {
    fixhistory.reload()
})
function onBack() {
    if (window.history.state.back)
        history.back()
    else
        router.replace('/')
}
const fixhistory = reactive({
    item: {},
    search: {
        searchText: "",
        startTime: format(subMonths(new Date(), 3), "yyyy-MM-dd"),
        endTime: format(new Date(), "yyyy-MM-dd"),
        sortBy: 0,
    },
    reload: () => {
        loading.value = true
        queryPreregisterMessage({
            "preNumber": route.query.id
        }).then(res => {
            fixhistory.item = res.data
            getRepairNoteByRepairId({
                "repairId": fixhistory.item.lastRepairRecord.repairId
            }).then(res => {
                fixhistory.list = res.data.noteList.map(item => {
                    item.createDatatime = format(new Date(item.createDatatime), "yyyy-MM-dd HH:mm")
                    item.submitFileList = JSON.parse(item.submitFileList)
                    return item
                })
                loading.value = false
            })
        })

    },
    list: [],
    model: {
        startTime: {
            show: false,
        },
        endTime: {
            show: false,
        }
    },
})
const preview = computed(() => {
    var v = ""
    fixhistory.list.forEach(item => {
        v = v + `${item.createDatatime} \n ${item.product} ${item.name} \n ${item.content}\n___________________________________\n`;
    })
    return v
})
function getStatusByValue(value) {
    // 使用switch语句来匹配值并返回相应的标签
    switch (value) {
        case 1:
            return '待维修';
        case 2:
            return '维修中';
        case 3:
            return '维修完成';
        case 4:
            return '无法修复';
        case 5:
            return '暂停';
        case 6:
            return '需外修';
        case 7:
            return '外修中';
        case 8:
            return '已取消';
        case 8:
            return '借用参考';
        default:
            return '未知'; // 或者根据需要返回其他默认值
    }
}

function getBusinessTypeByValue(value) {
    // 使用switch语句来匹配值并返回相应的标签
    switch (value) {
        case 1:
            return '正常';
        case 2:
            return '保修';
        case 3:
            return '走账';
        default:
            return '未知'; // 或者根据需要返回其他默认值
    }
}
const loading = ref(true)

// 组件引用
const fixListContainer = ref()

</script>

<template>

    <VanNavBar :fixed="true" clickable left-arrow @click-left="onBack">
        <template #title>
            <div class="flex flex-row gap-8">
                <van-search class="search" shape="round" v-model="fixhistory.search.searchText" placeholder="关键字" />
            </div>
        </template>
        <template #right>
            <div class="flex gap-[20px] justify-center items-center">
                <van-image @click="scan" width="16" height="16" src="/productManager/扫码.png" />
                <van-image @click="scan" width="16" height="16" src="/productManager/添加.png" />
            </div>
        </template>
    </VanNavBar>
    <div class="bg-#f2f4f8 flex flex-col gap-10 mx-10 my-[50px]">
        <div class="p-10px flex flex-row gap-20 bg-white rounded-[10px]">
            <a @click="fixhistory.model.startTime.show = true" class="text-15px">开始时间:{{ fixhistory.search.startTime }}
            </a>
            <a @click="fixhistory.model.endTime.show = true" class="text-15px">结束时间:{{ fixhistory.search.endTime }}
            </a>
        </div>
        <van-popup v-model:show="fixhistory.model.startTime.show" position="bottom">
            <van-date-picker :model-value="fixhistory.search.startTime.split('-')" @confirm="({ selectedValues }) => {
                fixhistory.search.startTime = selectedValues.join('-');
                fixhistory.model.startTime.show = false
            }" @cancel="fixhistory.model.startTime.show = false" />
        </van-popup>
        <van-popup v-model:show="fixhistory.model.endTime.show" position="bottom">
            <van-date-picker :model-value="fixhistory.search.endTime.split('-')" @confirm="({ selectedValues }) => {
                fixhistory.search.endTime = selectedValues.join('-');
                fixhistory.model.endTime.show = false
            }" @cancel="fixhistory.model.endTime.show = false" />
        </van-popup>

        <div class="bg-white rounded-[10px] p-10">
            <div class="w-100% flex justify-between">
                维修记录
                <VanRadioGroup direction="horizontal" v-model="fixhistory.search.sortBy">
                    <VanRadio :name="0">只看这台</VanRadio>
                    <VanRadio :name="1">按序列号</VanRadio>
                </VanRadioGroup>
            </div>
        </div>


        <div v-if="!loading" class="h-70vh">
            <div class="bg-white relative gap-5 rounded-[10px] w-[100%] min-h-100 flex flex-col items-center p-10">
                <div name="顶栏" class="w-[100%] flex justify-between">
                    <div class="flex flex-row justify-center items-center" name="客户">
                        {{ fixhistory.item.company.sName }}-{{
                            fixhistory.item.customer.sNameCn ? fixhistory.item.customer.sNameCn :
                                fixhistory.item.customer.sNameEn
                        }}
                    </div>
                    <div name="状态">
                        <h1 class="leading-none m-0 text-[12px] font-bold color-[#E7845B]">
                            {{ getStatusByValue(fixhistory.item.lastRepairRecord.status) }}</h1>
                    </div>
                </div>
                <div class="flex flex-row w-100% gap-10">
                    <EImage :width="'80px'" :height="'80px'"
                        :photo-url="fixhistory.item.sPhotoUrl == '' ? '[]' : fixhistory.item.sPhotoUrl" />
                    <div class="text-12">
                        <h1 class="m-0 text-14">{{ fixhistory.item.sPreregisterNo }}</h1>
                        <h1 class="m-0 text-10 text-[#323131] font-500">
                            {{ fixhistory.item.lastRepairRecord.brand }}-{{ fixhistory.item.lastRepairRecord.deviceName
                            }}
                        </h1>
                        <h1 class="m-0 text-10 text-[#323131] font-500">
                            {{ JSON.parse(fixhistory.item.lastRepairRecord.serialList)[0] }}</h1>

                        <VanTag v-if="fixhistory.item.lastRepairRecord.businessType == 2" type="success">
                            {{ getBusinessTypeByValue(fixhistory.item.lastRepairRecord.businessType) }}
                        </VanTag>
                        <VanTag v-if="fixhistory.item.lastRepairRecord.businessType == 1" type="primary">
                            {{ getBusinessTypeByValue(fixhistory.item.lastRepairRecord.businessType) }}
                        </VanTag>
                        <VanTag v-if="fixhistory.item.lastRepairRecord.businessType == 3" type="warning">
                            {{ getBusinessTypeByValue(fixhistory.item.lastRepairRecord.businessType) }}
                        </VanTag>

                    </div>
                </div>
                <p class=" bg-[#FAFAFA] m-0 p-5 w-100% ">
                    <a class="text-12px font-bold">故障状态:</a>
                    <a class="text-12px">{{ fixhistory.item.lastRepairRecord.remarks }}</a>
                </p>
                <!-- <div class="flex flex-row gap-10">

                <VanButton @click="handleAction(6)" v-if="fixhistory.item.lastRepairRecord.status == 2" class="w-[80px]"
                    round size="small">外修</VanButton>
                <VanButton @click="handleAction(1)" v-if="fixhistory.item.lastRepairRecord.status == 2" class="w-[80px]"
                    round size="small">无法维修</VanButton>
                <VanButton @click="handleAction(0)" v-if="fixhistory.item.lastRepairRecord.status == 2" class="w-[80px]"
                    round size="small">完成</VanButton>
            </div> -->
            </div>

            <!-- 数据列表
            <div v-for="(item, index) in fixhistory.list" :key="index" class="bg-white relative gap-10 rounded-[10px] w-[100%] mt-10 min-h-100 flex flex-col items-center p-10">
                序号:{{ index }}
                笔记:{{ item.postRepairStatus }}
                文件:{{ item.submitFileList }}
                时间:{{ item.createDatatime }}
            </div> -->
            <div v-for="(item, index) in fixhistory.list" :key="index"
                class="bg-white relative w-full mt-4 p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-200">
                <div class="w-full flex flex-col gap-3">
                    <!-- 头部信息 -->
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <span class="px-3 py-1 rounded-full bg-blue-50 text-blue-600 text-[20px] font-medium">
                                #{{ index + 1 }}
                            </span>
                            <span class="text-gray-500 text-[20px]">
                                {{ item.createDatatime }}
                            </span>
                        </div>
                    </div>

                    <!-- 笔记内容 -->
                    <div class="text-gray-800 text-[20px] leading-relaxed relative pl-5">
                        <!-- <span class="absolute left-0 top-0 text-blue-600">•</span> -->
                        <MdPreview :modelValue="item.postRepairStatus" />
                        <!-- {{ item.postRepairStatus || '暂无维修备注' }} -->
                    </div>

                    <!-- 文件附件 -->
                    <div v-if="item.submitFileList?.length" class="mt-2">
                        <div class="text-[15px] text-gray-500 mb-2">相关附件：</div>
                        <div class="flex flex-wrap gap-2">
                            <a v-for="(file, fileIndex) in item.submitFileList" :key="fileIndex" :href="file.url"
                                target="_blank"
                                class="px-3 py-1.5 rounded-md bg-gray-50 hover:bg-gray-100 transition-colors text-[15px] flex items-center gap-2 border border-gray-200 hover:text-blue-600 hover:border-blue-200">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                </svg>
                                {{ file.name || `附件${fileIndex + 1}` }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>


</template>

<style lang="less" scoped>
.search {
    // width: 110px;
    height: 2rem;
    border-radius: 5px;
    opacity: 1;

    /* 纯白 */
    background: #FFFFFF;

}
</style>
